<template>
  <div>
    <div class="control-strategy-page">
      <div class="content container">
        <div class="head-section">
          <h3 class="table-head">所属网点：</h3>
          <el-select
            v-model="organId"
            @change="organChangeEvent"
            placeholder="请选择所属网点"
          >
            <el-option
              v-for="item in organOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <header>
            <el-button size="medium" type="primary" plain @click="handleAdd"
              >添加
            </el-button>
          </header>
        </div>
        <div class="table-section">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-table
              ref="refAreaAppliancesTable"
              :data="DiagramListData"
              border
            >
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                style="cursor: pointer"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                style="cursor: pointer"
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                style="cursor: pointer"
              >
              </el-table-column>

              <el-table-column label="编辑操作" width="350">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEditOperation(scope.row)"
                    >编辑拓扑图</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    @click="handlePreviewOperation(scope.row)"
                    >预览拓扑图</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.row)"
                    >编辑</el-button
                  >

                  <el-button
                    type="danger"
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <el-dialog
      class="add-tuopo-dia"
      :title="isAddNew ? '新增拓扑图' : '编辑拓扑图信息'"
      :visible.sync="dialogTuoPoVisible"
      width="500px"
      @close="resetPojoForm"
      :close-on-click-modal="false"
    >
      <el-form
        style="margin-top: 10px"
        :rules="rules"
        :model="pojoTuoPo"
        ref="pojoForm"
        status-icon
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="名称：" prop="name">
          <el-input v-model.trim="pojoTuoPo.name"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model.trim="pojoTuoPo.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="isAddNew"
          type="primary"
          @click="addTuoPoSubmit('pojoForm')"
          >确 定
        </el-button>
        <el-button v-else type="primary" @click="editTuoPoSubmit('pojoForm')"
          >确 定
        </el-button>
        <el-button @click="dialogTuoPoVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ajax from "@/utils/ajax";
import { tableSelection, deleteConfirm } from "@/utils/elementui.js";
import date from "@/utils/date";
import axios from "axios";
export default {
  data() {
    return {
      userid: "",
      organId: null,
      permission: {
        add: false,
        modify: false,
        delete: false,
        add_operation: false,
        delete_operation: false,
      },
      tableIndex: 0,
      isAddNew: true,
      organOptions: [],
      DiagramListData: [],
      dialogTuoPoVisible: false,
      pojoTuoPo: {
        name: "",
        organId: "",
        remark: "",
        wiringDiagram: "",
      },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.userid = this.$store.getters.user.id;
    this.getOrganListData();
  },
  mounted() {
    this.$store.dispatch("actions/dynamicTitleAction", this.$route.meta.title);
  },
  methods: {
    // 获取网点列表
    getOrganListData() {
      ajax.get({
        url: this.$API.getUserOrgan + this.userid,
        success: (response) => {
          //console.log(response)
          const resp = response.data;
          if (resp.length > 0) {
            this.organOptions = resp;
            this.organId = resp[0].id;
            this.pojoTuoPo.organId = this.organId;
            this.getWiringDiagramList();
          } else {
            this.organOptions = [];
          }
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    //切换网点
    organChangeEvent() {
      this.pojoTuoPo.organId = this.organId;
      this.getWiringDiagramList();
    },
    // 获取列表
    getWiringDiagramList() {
      ajax.get({
        url: this.$API.getWiringDiagramListByOrganId + `${this.organId}`,
        success: (response) => {
          const resp = response.data;
          this.DiagramListData = resp;
        },
      });
    },
    //编辑
    handleEditOperation(data) {
      localStorage.setItem("svginfodata", JSON.stringify(data));
      this.$router.push({
        path: "/topoedit",
        name: "topoedit",
      });
    },
    //预览
    handlePreviewOperation(data) {
      localStorage.setItem("svginfo", data.wiringDiagram);
      let Link = this.$router.resolve({
        path: "/tuopuPreview",
        name: "tuopuPreview",
      });
      window.open(Link.href, "_blank");
    },
    //新增
    handleAdd() {
      this.dialogTuoPoVisible = true;
      this.isAddNew = true;
    },
    //提交
    addTuoPoSubmit(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.saveOrganWiringDiagram,
            data: this.pojoTuoPo,
            success: (response) => {
              //console.log(response)
              if (response.success) {
                this.getWiringDiagramList();

                this.dialogTuoPoVisible = false;
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: response.message,
                  type: "warning",
                });
              }
            },
            error: (res) => {
              //console.log(res)
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },
    //
    handleEdit(data) {
      this.pojoTuoPo = { ...data };
      this.isAddNew = false;
      this.dialogTuoPoVisible = true;
    },
    //编辑
    editTuoPoSubmit(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.updateOrganWiringDiagram,
            data: this.pojoTuoPo,
            success: (response) => {
              //console.log(response)
              if (response.success) {
                this.getWiringDiagramList();

                this.dialogTuoPoVisible = false;
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: response.message,
                  type: "warning",
                });
              }
            },
            error: (res) => {
              //console.log(res)
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },
    handleDelete(id) {
      deleteConfirm(this).then((res) => {
        if (res) {
          ajax.get({
            url: this.$API.deleteOrganWiringDiagram+id,
            success: (response) => {
              //console.log(response)
              if (response.success) {
                this.getWiringDiagramList();

            
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: response.message,
                  type: "warning",
                });
              }
            },
            error: (res) => {
              //console.log(res)
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },
    // 表单重置
    resetPojoForm() {
      this.$refs["pojoForm"].resetFields();
      this.pojoTuoPo = {
        name: "",
        organId: "",
        remark: "",
        wiringDiagram: "",
      };
    },
  },
};
</script>

<style lang="stylus" scoped>
>>> {
  .control-strategy-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.2rem;
    overflow: auto;

    .head-section {
      .table-head {
        /* margin-top 0.2rem */
        height: 0.43rem;
        line-height: 0.43rem;
        font-size: 0.16rem;
        font-weight: normal;
        float: left;
      }

      header {
        float: right;
      }
    }

    .table-section {
      position: absolute;
      top: 0.72rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 0.2rem;
      box-sizing: border-box;
      background: #202c5f;
      overflow: auto;

      .content-button {
        text-align: right;
      }

      .area-table-section {
        position: absolute;
        top: 0.66rem;
        left: 0.2rem;
        right: 0.2rem;
        bottom: 0.2rem;

        .el-select--mini {
          width: 60px;

          .el-input--suffix .el-input__inner {
            padding-right: 20px;
            padding-left: 10px;
          }
        }

        .air-table-item {
          margin-right: 0.1rem;
        }

        .tem-input {
          width: 40px;
          height: 28px;

          .el-input__inner {
            height: 100%;
            padding: 0;
            text-align: center;
          }
        }
      }

      .el-dialog__body {
        padding: 10px 20px 0;
      }
    }
  }

  .manage-page-aside .el-table__body tr {
    cursor: pointer;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td {
    color: #fff;
    background-color: rgba(68, 199, 244, 0.2) !important;
  }

  .el-table__body-wrapper {
    overflow-y: auto !important;
  }

  .el-table .el-checkbox__label, .el-table .el-radio__label, .el-checkbox {
    color: #fff;
  }

  .el-button.is-round {
    padding: 3px 6px;
  }

  .temperature-txt {
    padding: 0 0.1rem;
    font-size: 0.16rem;
    color: #fff;
  }

  .disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 90%;
  }

  >>> .same-dia {
    .el-form .el-form-item:last-child {
      margin-bottom: 0;
    }

    .el-dialog__footer {
      padding: 0 0.3rem 0.3rem;
    }
  }

  .section-head {
    position: relative;
    margin-bottom: 0.1rem;

    .head-title {
      position: absolute;
      bottom: 0;
      display: inline-block;
      float: left;
      font-size: 0.16rem;
      font-weight: normal;
    }

    .buttons {
      display: inline-block;
      float: right;
    }
  }

  /* 空调状态 */
  .aic-conditioner-section {
    .air-table-item {
      display: inline-block;
      width: 1.8rem;
      margin: 0.1rem 0;
      margin-right: 0.02rem;

      .el-select {
        padding: 0;
        width: 50%;
      }
    }
  }
}

>>>.shuttle-row .el-transfer-panel {
  background: none;
}

>>>.el-switch__label {
  color: #fff;
}

>>>.el-switch__label.is-active {
  color: #fff;
}

>>>.shuttle-row .el-transfer-panel__item.el-checkbox {
  color: #fff;
}

>>>.shuttle-row .el-transfer__button {
  display: block;
  margin: 0;
  width: 90px;
  margin-top: 10px;
}
</style>
